<!DOCTYPE html>
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

  <title> 登录 </title> 
  
  <link rel="stylesheet" href="style/css/base.css"  /> 
  <link rel="stylesheet" href="style/css/login.css"  /> 
  <link rel="stylesheet" href="style/layui/css/layui.css"  >
  <link rel="stylesheet" href="style/layer/skin/layer.css"  >

  <script  type="text/javascript" src="style/js/jquery-1.7.1.min.js"></script> 
  <script  type="text/javascript" src="style/js/jquery.cookie.js"></script> 
  <script  type="text/javascript" src="style/layui/layui.js"></script> 
  <script  type="text/javascript" src="style/layer/layer.js"></script>

  <!-- 验证码 隐藏滚动条 -->
  <style>
  		.imgcode{
			width: 95px;
			position: absolute;
			right: 0;
			top: 0px;
			cursor: pointer;
			height: 46px;
			font-size: 24px;
			text-align: center;
			line-height: 46px; 
		}
		::-webkit-scrollbar{
			display:none;
		}
  </style>

 </head> 
 <body  onload="changeImg()" onkeydown="keyLogin()"> 
  <div id="content" class="content"> 

    <div class="banner-box">
    <form id="mainForm" class="main-form"  > 
		 <div class="tab-title"> 
		  <a class="linkABlue" id="toAccountLogin" href="login">账号登录</a>
		  <span class="register-line"></span> 
		  <a class="linkAGray" id="toVCodeLogin" href="register">账号注册</a>
		 </div>
		 <div id="errorMsg" class="tip-box visiblility-hidden"> 
		  <i class="err-ico"></i> 
		  <span class="tip-font" id="tipMsg">请填写完整的登录信息</span> 
		  <span id="closeErrorMsg" class="close-ico"></span> 
		 </div> 
		 
		 <!-- 用户名 -->
		 <div class="normalInput">
		   <input class="ipt-account inp-focus" name="username" id="username" maxlength="50" placeholder="手机号/用户名"
				  autocomplete="off"  onfocus="closeErrorMsg()" />
		 </div> 
		 <!-- 密 码 -->
		 <div class="normalInput "> 
		  <input type="password" class="inp-focus" name="password" id="password" maxlength="16" autocomplete="off"
				 placeholder="密码" onfocus="closeErrorMsg()"  />
		  
		 </div> 
		 <!-- 验证码 -->
		 <div class="normalInput">
		   <input class="ipt-account inp-focus" name="verify" id="verify" maxlength="50" placeholder="验证码" autocomplete="off"  onfocus="closeErrorMsg()" /> 
		   <span id="code"  class="imgcode" ></span>
		   <!-- <img src="test.jpg" class="imgcode" id="code"> --> 
		 </div>

		 <a id="login" class="fullBtnBlue">登录</a>
	 
    </form>
   </div> 
  </div>
  
 <script type="text/javascript">
    //不加这个复选框样式不会改变
 	layui.use('form', function(){
	  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	});  
	

	//回车登录
    function keyLogin(){
	 	if (event.keyCode==13){ //回车键的键值为13
	 		//document.getElementById("login").click(); //调用登录按钮的登录事件
	 		//或者使用jquery实现
	 		$("#login").click();
	 	}  
	}

  	//用于验证码
	var code;//声明一个变量用于存储生成的验证码  
	document.getElementById("code").onclick=changeImg;  
	function changeImg(){  
	    //alert("换图片");  
	    var arrays=new Array(  
	        '1','2','3','4','5','6','7','8','9','0',  
	        'a','b','c','d','e','f','g','h','i','j',  
	        'k','l','m','n','o','p','q','r','s','t',  
	        'u','v','w','x','y','z',  
	        'A','B','C','D','E','F','G','H','I','J',  
	        'K','L','M','N','O','P','Q','R','S','T',  
	        'U','V','W','X','Y','Z'               
	    );  
	    code='';//重新初始化验证码  
	    //alert(arrays.length);  
	    //随机从数组中获取四个元素组成验证码  
	    for(var i=0;i<4;i++){  
	    //随机获取一个数组的下标  
	        var r=parseInt(Math.random()*arrays.length);  
	        code+=arrays[r];  
	        //alert(arrays[r]);  
	    }  
	    //alert(code);  
	    document.getElementById('code').innerHTML=code;//将验证码写入指定区域  
	} 

  	//点击登录事件
  	$("#login").click(function(){  
    		var username = $("#username").val();
			var password = $("#password").val();
			var verify = $("#verify").val();
			if( username=="" || password=="" || verify==""){
				var obj = document.getElementById("errorMsg");
				$("#tipMsg").html("请填写完整的登录信息！");
				obj.setAttribute("class", "tip-box visiblility-show");
				return ;
			}
			//验证码不对
			if( code.toLowerCase()!=verify){
				//提示错误信息
				var obj = document.getElementById("errorMsg");
				//修改提示文字
				$("#tipMsg").html("请填写正确的验证码！");
				obj.setAttribute("class", "tip-box visiblility-show");
				return ;
			}

			//发送ajax请求
			$.ajax({
				  type: 'POST',
				  url: 'login',
				  data: 'username='+username+'&password='+password,
				  dataType: 'JSON',
				  success: function(data){
				  	  if (data.code == 0) {
						  if (data.msg != '') {
							  var obj = document.getElementById("errorMsg");
							  $("#tipMsg").html(data.msg);
							  obj.setAttribute("class", "tip-box visiblility-show");
						  } else {
							  window.location.href = 'index';
						  }
					  }
				  },
			});
	});  

  	//点击错误信息关闭按钮
  	$("#closeErrorMsg").click(function(){
			var obj = document.getElementById("errorMsg");
			obj.setAttribute("class", "tip-box visiblility-hidden");
  	});

  	//关闭错误提示
  	function closeErrorMsg(){
  			var obj = document.getElementById("errorMsg");
			obj.setAttribute("class", "tip-box visiblility-hidden");
  	};

  	//验证码提示
	$('.imgcode').hover(function(){
		layer.tips("点击更换验证码", '#code', {
        		time: 2000,
        		tips: [2, "#3c3c3c"]
    		});
	});

</script>
  

</body>
</html>
